import React, { Component } from 'react';
import  { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { actionCreators } from './store'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    NavSearchWrapper,
    SearchContentWrapper,
    SearchContentTitle,
    SearchContentRefresh,
    SearchContentList,
    SearchContentListItem
} from './style';

class Header extends Component {

    render() {
        return (
            <div>
                <HeaderWrapper>
                    <Link to="/">
                        <Logo></Logo>
                    </Link>
                    <Nav>
                        <NavItem className="left active">首页</NavItem>
                        <NavItem className="left">下载App</NavItem>
                        <NavItem className="right">登录</NavItem>
                        <NavItem className="right">
                            <i className="iconfont">&#xe636;</i>
                        </NavItem>
                        <NavSearchWrapper>
                            <CSSTransition
                                in={this.props.focused}
                                timeout={200}
                                classNames="slide"
                            >
                                <NavSearch
                                    className={this.props.focused ? 'focused' : ''}
                                    onFocus={this.props.handleOnFocus}
                                    onBlur={this.props.handleOnBlur}
                                ></NavSearch>
                            </CSSTransition>
                            <i className={this.props.focused ? 'focused iconfont' : 'iconfont'}>&#xe651;</i>
                            { this.showSearchContentWrapper() }
                        </NavSearchWrapper>
                        <Addition>
                            <Button className="write">
                                <i className="iconfont">&#xe61b;</i>
                                写文章</Button>
                            <Button className="register">注册</Button>
                        </Addition>
                    </Nav>
                </HeaderWrapper>
            </div>
        );
    }

    showSearchContentWrapper () {
        if (this.props.focused || this.props.moused) {
            return (
                <SearchContentWrapper
                    onMouseEnter={this.props.onMouseEnter}
                    onMouseLeave={this.props.onMouseLeave}
                >
                    <SearchContentTitle>热门搜索</SearchContentTitle>
                    <SearchContentRefresh>换一批</SearchContentRefresh>
                    <SearchContentList>
                        {
                            this.props.search_list.map((item) => {
                                return <SearchContentListItem key={item}>{item}</SearchContentListItem>
                            })
                        }
                    </SearchContentList>
                </SearchContentWrapper>
            );
        } else {
            return null;
        }
    }
}

const mapStateToProps = (state) => {
    return {
        //focused: state.header.focused,
        // 使用immutable.js 后的写法
        //focused: state.header.get('focused'),
        // 使用 redux-immutable.js 后的写法
        focused: state.get('header').get('focused'),
        moused: state.get('header').get('moused'),
        search_list: state.get('header').get('search_list'),
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleOnFocus () {
            dispatch(actionCreators.searchFocus());
            dispatch(actionCreators.getSearchContentList());
        },

        handleOnBlur () {
            dispatch(actionCreators.searchBlur());
        },

        onMouseEnter () {
            dispatch(actionCreators.searchContentOnMouseEnter());
        },

        onMouseLeave() {
            dispatch(actionCreators.searchContentOnMouseLeave());
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);